<template>
  <data-table-app-page>
    <data-table
      url="/api/volunteer/order/page"
      :query-params="{receiveUser: $params.volunteer.userId}"
    >
      <el-table-column prop="orderno" label="订单编号" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="serviceId" label="服务编号" width="152" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="接单时间" width="152"></el-table-column>
      <el-table-column prop="status" label="任务状态" width="100" v-slot="{row}">
        <status-tag :status="row.status" />
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button
            @click="onDetailsClick(row)"
          >
            详情
          </el-button>
        </template>
      </el-table-column>
    </data-table>
  </data-table-app-page>
</template>

<script>
import StatusTag from '@/pages/volunteer/order/StatusTag';

export default {
  pageProps: {
    title: '志愿者服务记录'
  },
  components: {
    StatusTag
  },
  methods: {
    onDetailsClick(order) {
      this.pushPage({
        path: '/volunteer/order/details',
        key: order.orderno,
        params: { order }
      });
    }
  }
}
</script>